<template>
	<view class="page">
		<view style="display: flex;flex-direction: row;justify-content: space-between;background: #FFFFFF;">
			<view style="display: flex;flex-direction: column;align-items: center;margin-left: 60upx;"
				@click="switchTab(1)">
				<view style="font-size: 28upx;color: #191919;font-weight: bold;">
					待下单
				</view>
				<image v-if="code===1" style="width: 48upx;height: 16upx;" src="../../static/images/publish-scoll.png"
					mode=""></image>
			</view>
			<view style="display: flex;flex-direction: column;align-items: center;" @click="switchTab(2)">
				<view style="font-size: 28upx;color: #191919;font-weight: bold;">
					进行中
				</view>
				<image v-if="code===2" style="width: 48upx;height: 16upx;" src="../../static/images/publish-scoll.png"
					mode=""></image>
			</view>
			<!-- <view style="margin-left: 106upx;display: flex;flex-direction: column;align-items: center;" @click="switchTab(3)">
				<view style="font-size: 28upx;color: #191919;font-weight: bold;">
					待结算
				</view>
				<image v-if="code===3" style="width: 48upx;height: 16upx;"
				 src="../../static/images/publish-scoll.png" mode=""></image>
			</view> -->
			<view style="display: flex;flex-direction: column;align-items: center;margin-right: 60upx;"
				@click="switchTab(4)">
				<view style="font-size: 28upx;color: #191919;font-weight: bold;">
					已完成
				</view>
				<image v-if="code===4" style="width: 48upx;height: 16upx;" src="../../static/images/publish-scoll.png"
					mode=""></image>
			</view>
		</view>
		
		
		<view style="background: #FFFFFF;border-radius: 20upx;width: 702upx;height: 254upx;
		margin-top: 24upx;margin-left: 24upx;margin-right: 24upx;" v-for="(item,index) in demandOrderList" :key="index" v-if="code === 1">
			<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
				<view
					style="display: flex;flex-direction: row;align-items: center;margin-top: 24upx;margin-left: 24upx;">
					<image style="width: 48upx;height: 48upx;border-radius: 24upx;" :src="item.userAvatar" mode="">
					</image>
					<view style="color: #191919;font-size: 26upx;margin-left: 12upx;">{{item.username}} (发单人)</view>
				</view>
				<view style="color: #FF4E4C;font-size: 24upx;margin-right: 24upx;margin-top: 24upx;">
					待对方下单
				</view>
			</view>
		
			<view style="display: flex;flex-direction: row;margin-top: 24upx;margin-left: 24upx;margin-right: 24upx;" v-if="item.image !== null">
				<image style="width: 140upx;height: 140upx;border-radius: 16upx;" :src="item.image" mode="aspectFill"></image>
				<view
					style="display: flex;flex-direction: column;margin-left: 20upx;justify-content: space-between;width: 100%;">
					<view style="color: #191919;font-size: 28upx;">{{item.title}}</view>
					<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
						<view style="color: #9E9E9E;font-size: 24upx;">
							{{item.orderTime}}
						</view>
						<view style="color: #191919;font-size: 32upx;font-weight: bold;">￥{{item.estimateAmount}}</view>
					</view>
				</view>
		
			</view>
			
			<view style="display: flex;flex-direction: row;margin-top: 24upx;margin-right: 24upx;" v-if="item.image ===null">
				<!-- <image style="width: 140upx;height: 140upx;border-radius: 16upx;" :src="item.image" mode=""></image> -->
				<view
					style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 80upx;width: 100%;">
					<view style="color: #191919;font-size: 28upx;">{{item.title}}</view>
					<view style="display: flex;flex-direction: row;align-items: center;margin-top: 26upx;justify-content: space-between;">
						<view style="color: #9E9E9E;font-size: 24upx;">
							{{item.orderTime}}
						</view>
						<view style="color: #191919;font-size: 32upx;font-weight: bold;">￥{{item.estimateAmount}}</view>
					</view>
				</view>
			
			</view>
		</view>




		<view style="background: #FFFFFF;border-radius: 20upx;width: 702upx;height: 254upx;
		margin-top: 24upx;margin-left: 24upx;margin-right: 24upx;" v-for="(item,index) in demandOrderList" :key="index" v-if="code !== 1">
			<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
				<view
					style="display: flex;flex-direction: row;align-items: center;margin-top: 24upx;margin-left: 24upx;">
					<image style="width: 48upx;height: 48upx;border-radius: 24upx;" :src="item.userAvatar" mode="">
					</image>
					<view style="color: #191919;font-size: 30upx;margin-left: 16upx;">{{item.username}} (发单人)</view>
				</view>
				<view style="color: #FF4E4C;font-size: 24upx;margin-right: 24upx;margin-top: 24upx;">
					<text v-if="item.status===2">已完成</text>
					<text v-if="item.status===1">进行中</text>
				</view>
			</view>

			<view style="display: flex;flex-direction: row;margin-top: 24upx;margin-left: 24upx;margin-right: 24upx;" v-if="item.image !== null">
				<image style="width: 140upx;height: 140upx;border-radius: 16upx;" :src="item.image" mode="aspectFill"></image>
				<view
					style="display: flex;flex-direction: column;margin-left: 20upx;justify-content: space-between;width: 100%;">
					<view style="color: #191919;font-size: 28upx;">{{item.title}}</view>
					<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 30upx;">
						<view style="color: #9E9E9E;font-size: 24upx;">
							{{item.orderTime}}
						</view>
						<view style="color: #191919;font-size: 32upx;font-weight: bold;">￥{{item.orderAmount}}</view>
					</view>
				</view>

			</view>
			
			<view style="display: flex;flex-direction: row;margin-top: 24upx;margin-right: 24upx;" v-if="item.image ===null">
				<!-- <image style="width: 140upx;height: 140upx;border-radius: 16upx;" :src="item.image" mode=""></image> -->
				<view
					style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 80upx;width: 100%;">
					<view style="color: #191919;font-size: 28upx;">{{item.title}}</view>
					<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 30upx;">
						<view style="color: #9E9E9E;font-size: 24upx;">
							{{item.orderTime}}
						</view>
						<view style="color: #191919;font-size: 32upx;font-weight: bold;">￥{{item.orderAmount}}</view>
					</view>
				</view>
			
			</view>
		</view>
		
		
		

		<view style="display: flex;flex-direction: column;align-items: center;" v-if="isShow">
			<image style="width: 350upx;height: 240upx;margin-top: 450upx;"
				src="../../static/images/order-default-no.png" mode=""></image>
			<view style="color: #B7B8BB;font-size: 28upx;margin-top: 20upx;">没有相关订单~</view>
		</view>

	</view>
</template>

<script>
	import {
		mine_taking_order
	} from '../../api/mine/demand-order.js'
	export default {
		data() {
			return {
				code: 1,
				demandOrderList: [],
				isShow: false
			}
		},
		onShow() {
			this.code = 1
			this.getDemandOrderList(1)
		},
		methods: {
			switchTab(value) {
				this.code = value
				this.demandOrderList = []
				this.getDemandOrderList(value)
			},
			getDemandOrderList(val) {
				let params = {}
				params.type = val
				this.isShow = false
				mine_taking_order(params).then(res => {
					console.log(res)
					if (res.status === 200) {
						if (res.data === null) {
							this.isShow = true
							this.demandOrderList = []
						} else {
							this.demandOrderList = res.data
							this.isShow = false
						}

					}
				})
			}
		}
	}
</script>

<style>

</style>
